<template>
  <div style="width: 100%">
    <a-row>
      <a-col :span="12">
        <div class="chartCard">
          <div class="first">
            <span class="title">
              今日发布量
            </span>
            <span>
              <a-tooltip>
                <template slot="title">
                  今日发布量
                </template>
                <a-icon class="cursor" type="info-circle" />
              </a-tooltip>
            </span>
          </div>
          <div>
            <div id="todaPushCount" style="width: 500px;height: 300px;"></div>
          </div>
        </div>
      </a-col>
      <a-col :span="12">
        <div class="chartCard">
          <div class="first">
            <span class="title">
              总发布量
            </span>
            <span>
              <a-tooltip>
                <template slot="title">
                  总发布量
                </template>
                <a-icon class="cursor" type="info-circle" />
              </a-tooltip>
            </span>
          </div>
          <div>
            <div id="pushCount" style="width: 500px;height: 300px;"></div>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-divider/>
    <a-row>
      <a-col :span="12">
        <div class="chartCard">
          <div class="first">
            <span class="title">
              近7日注册用户量
            </span>
            <span>
              <a-tooltip>
                <template slot="title">
                  近7日注册用户量
                </template>
                <a-icon class="cursor" type="info-circle" />
              </a-tooltip>
            </span>
          </div>
          <div>
            <div id="registerCount" style="width: 500px;height: 300px;"></div>
          </div>
        </div>
      </a-col>
      <a-col :span="12">
        <div class="chartCard">
          <div class="first">
            <span class="title">
              今日操作日志评率
            </span>
            <span>
              <a-tooltip>
                <template slot="title">
                  今日操作日志评率
                </template>
                <a-icon class="cursor" type="info-circle" />
              </a-tooltip>
            </span>
          </div>
          <div>
            <div id="operaLogsCount" style="width: 500px;height: 300px;"></div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {getOperaLogsCount, getPushCount, getWeeksRegisterCount} from "@/api/echarts";

export default {
  name: "dashboard",
  data(){
    return {
      todayPushCountList:[],
      allPushCountList:[],
      weeks:[],
      weeksValue:[],
      times:[],
      logOperaValues:[]
    }
  },
  mounted() {
    // 发布数
    this.getPustCountInfo();
    // 注册数
    this.getWeeksRegisterCountInfo();
    // 日志
    this.getOperaLogsCountInfo();
  },
  methods:{
    // 今日发布数统计
    todayPushCount(){
      var myChart = this.$echarts.init(document.getElementById('todaPushCount'));
      //配置图表
      var option = {
        tooltip: {
          trigger: 'item',
          textStyle:{
            fontSize: 14
          }
        },
        color:[
          "#1890ff","#fac858","#fc8452"
        ],
        series: [
          {
            name: '今日发布数统计',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.todayPushCountList
          }
        ]
      };
      myChart.setOption(option);
    },
    // 总发布数统计
    pushCount(){
      var myChart = this.$echarts.init(document.getElementById('pushCount'));
      //配置图表
      var option = {
        tooltip: {
          trigger: 'item',
          textStyle:{
            fontSize: 14
          }
        },
        color:[
          "#1890ff","#fac858","#fc8452"
        ],
        series: [
          {
            name: '总发布数统计',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.allPushCountList
          }
        ]
      };
      myChart.setOption(option);
    },
    // 七日注册统计
    registerCount(){
      var myChart = this.$echarts.init(document.getElementById('registerCount'));
      //配置图表
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color:["#1890ff"],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.weeks,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '注册数',
            type: 'bar',
            barWidth: '60%',
            data: this.weeksValue
          }
        ]
      };
      myChart.setOption(option);
    },
    // 操作评率
    operaLogsCount(){
      var myChart = this.$echarts.init(document.getElementById('operaLogsCount'));
      //配置图表
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.times
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 次'
          },
          axisPointer: {
            snap: true
          }
        },
        visualMap: {
          show: false,
          dimension: 0,
          pieces: [
            {
              lte: 6,
              color: 'green'
            },
            {
              gt: 6,
              lte: 8,
              color: 'red'
            },
            {
              gt: 8,
              lte: 14,
              color: 'green'
            },
            {
              gt: 14,
              lte: 17,
              color: 'red'
            },
            {
              gt: 17,
              color: 'green'
            }
          ]
        },
        series: [
          {
            name: '记录操作日志次数',
            type: 'line',
            smooth: true,
            // prettier-ignore
            data: this.logOperaValues
          }
        ]
      };
      myChart.setOption(option);
    },

    // 获取发布数
    async getPustCountInfo(){
      const { code,data,msg } = await getPushCount();
      if (code === 200){
        this.todayPushCountList = data.todayData;
        this.allPushCountList = data.allData;
        this.$nextTick(()=>{
          this.todayPushCount();
          this.pushCount();
        })
      } else {
        this.$message.error(msg);
      }
    },

    // 获取7日注册数
    async getWeeksRegisterCountInfo(){
      const { code,data,msg } = await getWeeksRegisterCount();
      if (code === 200){
        this.weeks = data.weeks;
        this.weeksValue = data.value;
        this.$nextTick(()=>{
          this.registerCount();
        })
      } else {
        this.$message.error(msg);
      }
    },

    // 获取日志操作数
    async getOperaLogsCountInfo(){
      const { code,data,msg } = await getOperaLogsCount();
      if (code === 200){
        this.times = data.times;
        this.logOperaValues = data.values;
        this.$nextTick(()=>{
          this.operaLogsCount();
        })
      } else {
        this.$message.error(msg);
      }
    }
  }
}
</script>

<style lang="less" scoped>
.first{
  height: 22px;
  padding: 5px;
  box-sizing: border-box;
  .title{
    color : rgba(0, 0, 0, 0.45);
    font-size: 14px;
    line-height: 22px;
  }
}
//.usercount{
//  overflow: hidden;
//  text-overflow: ellipsis;
//  word-break: break-all;
//  white-space: nowrap;
//  color: #000;
//  margin-top: 4px;
//  margin-bottom: 0;
//  font-size: 30px;
//  line-height: 38px;
//  height: 38px;
//}
.userfooter{
  margin-bottom: 12px;
  position: relative;
  height: 30px;
  width: 100%;
  .content{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }
}
.chartCard{
  width: 95%;
  padding: 10px;
  border: 1px solid #e8e8e8;
  font-size: 14px
}
</style>
